<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <title>后台</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" href="../../../../static/layui/css/layui.css"/>
    <link rel="stylesheet" th:href="@{/resources/zTree/css/zTreeStyle/zTreeStyle.css}"
          href="../../../../static/resources/zTree/css/zTreeStyle/zTreeStyle.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="/admin/share/_header :: header"></div>

    <!-- 左侧导航区域 -->
    <div th:replace="/admin/sys_mgt/share/_left_sidebar :: leftSidebar('menu')"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li>菜单管理</li>
                </ul>
                <div class="layui-tab-content">
                    <ul id="menuTree" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>

    <div th:replace="/admin/share/_footer :: footer"></div>
</div>

<script th:src="@{/layui/layui.js}" src="../../../../static/layui/layui.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script th:src="@{/resources/zTree/js/jquery.ztree.core.js}"
        src="../../../../static/resources/zTree/js/jquery.ztree.core.js"></script>

<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

<script type="text/javascript">
    //JavaScript代码区域
    layui.use(['element', 'layer'], function () {
        var element = layui.element, layer = layui.layer;

    });

    var menuRoot = '[[${menu}]]';
    menuRoot = menuRoot.replace(/&quot;/g, "\"")
    console.log('menuRoot ==>> ', menuRoot);

    var setting = {
        async: {
            enable: true,
            type: 'GET',
            url: "/admin/menus/all",
            autoParam: ["id=parentId", "level=lv"],
            otherParam: {"otherParam": "zTreeAsyncTest"},
        },
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        }
    };

    $(document).ready(function () {
        $.fn.zTree.init($("#menuTree"), setting, JSON.parse(menuRoot));
    });
</script>
</body>
</html>